<template>
	<view v-if="options.data.content.shopName" class="grace-card-view">
	<!-- <view v-if="options.data.content.shopName" class="grace-card-view grace-imgbg" style="margin-top:10upx;background-image:url(../../static/backgroundImage.jpg);background-attachment: fixed;background-repeat: no-repeat;background-size: cover;"> -->
		<view class="grace-capsule">
			<view class="grace-capsule-icon grace-icon-br" :style="{background:appConfigs.mainColor}">{{options.data.content.shopName}}</view>
<!-- 			<view class="grace-capsule-text grace-text-br" style="text-decoration:line-through" :style="{borderColor:appConfigs.mainColor, color:appConfigs.mainColor}">原价￥{{options.data.content.servicePrice}}</view>
			<view class="grace-capsule-text grace-text-br" :style="{borderColor:appConfigs.mainColor, color:appConfigs.mainColor}">折扣￥{{parseInt(parseInt(options.data.content.servicePrice)*0.5)}}</view> -->			
		</view>
		<view class="grace-nowrap grace-flex-center">
			<image 
				v-if="!imageVideoDisplay" 
				@tap="videoPlay"
				:src="appConfigs.serverAddress+'shopImage/file/'+options.data.content.shopCode+'/'+options.data.content.shopImage" 
				style="height: 380upx;"
			></image>
			<video 
				v-if="imageVideoDisplay" 
				:src="appConfigs.serverAddress+'shopVideo/file/'+options.data.content.shopCode+'/'+options.data.content.video" 
				:poster="appConfigs.serverAddress+'shopVideo/file/'+options.data.content.shopCode+'/'+options.data.content.video.replace('mp4','png')"
				controls 
				autoplay="autoplay"
				mode='aspectFit'
			></video>			
		</view>
		<!-- <view class="grace-capsule"> -->
			<!-- <view class="grace-capsule-text grace-text-br" :style="{borderColor:appConfigs.mainColor, color:appConfigs.mainColor}">{{options.data.content.spend}}个金点</view> -->
<!-- 			<view class="grace-capsule-text grace-text-br" :style="{borderColor:appConfigs.mainColor, color:appConfigs.mainColor}">5折</view>			
			<view class="grace-capsule-text grace-text-br" :style="{borderColor:appConfigs.mainColor, color:appConfigs.mainColor}">活动时间:	{{options.data.content.serviceTime}}</view> -->
		<!-- </view>							 -->
		<view class="grace-title-text">
			<text>地址: {{options.data.content.shopAddress.split(' ')[3]}}</text>
		</view>									
		<view class="footer">
			<view>
				<button size="mini" @tap="detail" class="grace-icons icon-photograph" :style="{color:appConfigs.mainColor}">详情</button>
			</view>	
			<view>
				<button size="mini" @tap="appoint" :class="serviceTypeClass" :style="{color:appConfigs.mainColor}">{{serviceType}}</button>
			</view>				
			<view>
				<button open-type="share" 
				:data-shopCode="options.data.content.shopCode"
				:data-shopName="options.data.content.shopName"
				:data-shopImage="appConfigs.serverAddress+'shopImage/file/'+options.data.content.shopCode+'/'+options.data.content.shopImage" 
				:data-servicePrice="options.data.content.servicePrice"
				:data-servicePriceHalf="parseInt(parseInt(options.data.content.servicePrice)*0.5)"
				size="mini" class="grace-icons icon-share" :style="{color:appConfigs.mainColor}">分享</button>
			</view>	
		</view>		
	</view>
</template>

<script>
	var that;
	export default {
		data () {
			return {
				imageVideoDisplay: this.value,
				// serviceType: this.options.data.content.shopType,
			}
		},
		name: 'shopList',
		props: {
			options: {
				type: Object,
				default: function(e) {
					return {}
				}
			},	
			appConfigs: {
				type:Object,
				default: function(e) {
					return {}
				}		
			}			
		},	
		computed : {
			serviceType(){
				if(this.options.data.content.shopType=='特产'){
					return '购买'
				}else{
					return '预约'
				}
			},
			serviceTypeClass(){
				if(this.options.data.content.shopType=='特产'){
					return 'grace-iconfont iconfont icon-goumai'
				}else{
					return 'grace-icons icon-time'
				}				
			}
		},
		methods: {		
			videoPlay: function(){
				if(!that){
					//播放视频
					that= this;
					this.imageVideoDisplay = !this.imageVideoDisplay;
				}else{
					if(that==this){
						//关闭视频
						this.imageVideoDisplay = !this.imageVideoDisplay;
						that= '';
					}else{
						//关闭其它视频、播放本次视频
						that.imageVideoDisplay = !that.imageVideoDisplay;
						this.imageVideoDisplay = !this.imageVideoDisplay;
						that=this;
					}
				}
				// this.$emit('input', this.imageVideoDisplay)  
				// that.imageVideoDisplay = 'false';
			},
			detail : function(){
				uni.navigateTo({
					url: '../shop/detail?shopCode='+
						this.options.data.content.shopCode
				})				
			},
			appoint: function(){
				// this.$emit('appoint',this.options.data.content.shopCode);
				//预约
				if(this.serviceType=='预约'){
					uni.navigateTo({
						url: '../appoint/add?shopCode='+
							this.options.data.content.shopCode+'&shopName='+
							this.options.data.content.shopName+'&shopAddress='+
							this.options.data.content.shopAddress+'&shopImage='+
							this.options.data.content.shopImage+'&video='+
							this.options.data.content.video+'&serviceTime='+
							this.options.data.content.serviceTime+'&spend='+
							this.options.data.content.spend
						})					
				}
				//购买
				else if(this.serviceType=='购买'){
					uni.navigateTo({
						url: '../order/add?shopCode='+
							this.options.data.content.shopCode+'&shopName='+
							this.options.data.content.shopName+'&shopAddress='+
							this.options.data.content.shopAddress+'&shopImage='+
							this.options.data.content.shopImage+'&video='+
							this.options.data.content.video+'&serviceTime='+
							this.options.data.content.serviceTime+'&servicePrice='+
							this.options.data.content.servicePrice
						})
				}
																
			},
			// share: function(){
			// 	uni.showToast({
			// 		title: '调试中...',
			// 		duration: 2000,
			// 		icon: 'none'
			// 	});					
			// }
		}
	}	
</script>

<style>
	@import "../../static/iconfont/iconfont.css";
	view{font-weight: 600;}
	.grace-card-view{margin-bottom: 0px;}
	/* 购买按钮 */
	.grace-iconfont{font-size:25upx;}
	.grace-card-view .footer .grace-iconfont:before {padding-right: 8px;}
</style>
